<template>
  <div>
    <a-row>
      <a-col :span="24">
        <pro-table
          ref="tableRef"
          :pagination="pagination"
          :fetch="fetch"
          :columns="tableConfig.columns"
          :param="state.param"
          :toolbar="toolbar"
        />
        <save v-if="state.visibleSave" ref="savemodal" :parent="state.parentData" :visible="state.visibleSave" @close="closeSave"></save>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import save from "./save-pelple";
import { handleFormEmptyData } from "@/tools/filters";
import { reactive, ref, onMounted } from "vue";
import { getDictByCodesReturnObj } from '@/tools/get-dict'
import dictEnum from '@/const/dict'

export default {
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    save
  },
  name: "index",

  setup(props, content) {
    const tableRef = ref();
    const savemodal = ref();
    const pagination = false;
    const closeSave = function() {
      state.visibleSave = false;
      tableRef.value.reload();
      content.emit('refresh')
    };
    let dictLists = reactive({
      data: {}
    })
    const tableConfig = reactive({
      columns: [
        {
          dataIndex: "contactsName",
          key: "contactsName",
          title: "联系人姓名",
          align: "center"
        },
        {
          dataIndex: "contactsPosition",
          key: "contactsPosition",
          title: "职位",
          align: "center"
        },
        {
          dataIndex: "contactsDepartment",
          key: "contactsDepartment",
          title: "所属部门",
          align: "center"
        },
        {
          dataIndex: "contactsSex",
          key: "contactsSex",
          title: "性别",
          align: "center",
          cellRender: (record, data) => {
            if (dictLists.data[dictEnum.SEX]) {
              const item = dictLists.data[dictEnum.SEX].find(v => v.value == data)
              return item ? item.label : ''
            }
            return ''
          }
        },
        {
          dataIndex: "contactsState",
          key: "contactsState",
          title: "状态",
          align: "center",
          cellRender: (record, data) => {
            if (dictLists.data[dictEnum.CONTACT_STATUS]) {
              const item = dictLists.data[dictEnum.CONTACT_STATUS].find(v => v.value == data)
              return item ? item.label : ''
            }
            return ''
          }
        },
        {
          dataIndex: "contactsPhone",
          key: "contactsPhone",
          title: "电话",
          align: "center"
        },
        {
          dataIndex: "contactsEmail",
          key: "contactsEmail",
          title: "Email",
          align: "center"
        }
      ],
    });
    const fetch = param => {
      return {
        data: Array.isArray(props.data.contactsList)
              ? props.data.contactsList
              : [],
      };
    };
    const toolbar = [
      {
        code: "college-manage:add",
        label: "新增",
        type: "primary",
        event: function() {
          state.visibleSave = true;
        }
      }
    ];
    const state = reactive({
      selectedRowKeys: [],
      param: {
        projectName: "",
        schName: "",
        responsiblePerson: ""
      },
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
      parentData: props.data,
    });

    const onSelectChange = selectedRowKeys => {
      state.selectedRowKeys = selectedRowKeys;
    };
    onMounted(async () => {
      dictLists.data = await getDictByCodesReturnObj([
        dictEnum.FOLLOW_PROGRESS,
        dictEnum.CONTACT_STATUS,
        dictEnum.SEX,
      ])
    })

    return {
      fetch,
      toolbar,
      pagination,
      state,
      closeSave,
      tableConfig,
      onSelectChange,
      tableRef,
      savemodal,
      handleFormEmptyData,
    };
  }
};
</script>

<style scoped></style>
